// react 原理介绍
// setState是异步执行
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    state = {
        count: 1
    }

    handleClick = () => {
        // 异步更新状态
        // （1）因为是异步的，所以state还是1，，多次调用也只相当于一次调用
        // this.setState({
        //     count: this.state.count + 1 // 变成2
        // })

        // 推荐语法, 也是异步的，但是这种方法能够真正的调用两次setState，因为会返回state
        this.setState((state, props) => {
            return {
                count: state.count + 1
            }
        },
        // 第二参数回调函数,会在dom完成后再调用
        // 状态更新后并且出现渲染后，才会执行
        () => {
            console.log("状态更新结束：", this.state.count)
            console.log(document.getElementById('title').innerText)
            // 可以操控dom
            document.title = '更新后的count是：' + this.state.count
        })
        // this.setState((state, props) => {
        //     return {
        //         count: state.count + 1
        //     }
        // })
        console.log(this.state.count) // 还是1
    }

    

    render() {
        return (
            <div>
                <h1 id='title'>计数器：{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))